<template>
   <div class="form">
     <!-- 提示框 -->
     <el-dialog title="提示" :visible.sync="openOff1" center :append-to-body='true' :lock-scroll="false" width="30%">
     <h1>注册成功，请前去登录！！！</h1>
     </el-dialog>
     <el-dialog title="提示" :visible.sync="openOff2" center :append-to-body='true' :lock-scroll="false" width="30%">
     <h1>注册失败，请重新注册！！！</h1>
     </el-dialog>
      <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px" class="demo-registerForm" style="width: 400px;">
        <el-form-item label="账号" prop = "account">
          <el-input v-model="registerForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="registerForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop = "phone">
          <el-input v-model="registerForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop = "email">
          <el-input v-model="registerForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">提交</el-button>
          <el-button @click="resetForm('registerForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
  export default {
    name: "Register",
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerForm.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        openOff1: false,
        openOff2: false,
        registerForm: {
          account: '',
          pass: '',
          checkPass: '',
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // 前端校验后获得输入的账号密码
        // console.log(this.registerForm.account);
        // console.log(this.registerForm.pass);
        // 发起 post 注册请求
        this.$axios.post('/user/register', {
              username: this.registerForm.account,
              password: this.registerForm.pass,
              phone: this.registerForm.phone,
              email: this.registerForm.email
             })
             .then((res)=>{
              if(res.status == 200) {
                 var response = res.data;
                 var isSuccess = response.code;
                 if(isSuccess == 5) {  // 注册成功
                   this.openOff1 = true;
                   // 延迟10s返回首页
                   //setTimeout(this.$router.push({name: 'BookList', params: {}}), 10000);
                   //调用elementUI的加载层
                   const loading = this.$loading({
                          lock: true,
                          text: '10s后跳转到商品页面~',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                   });
                    setTimeout(() => {
                         this.$router.push({path: "/Login"}); // 强制切换到登录页面
                         loading.close();
                    }, 5000);  // 5秒跳转
                 } else if(isSuccess == 6){  // 注册失败
                   this.openOff2 = true;
                   // 延迟10s返回首页
                   //setTimeout(this.$router.push({name: 'BookList', params: {}}), 10000);
                   //调用elementUI的加载层
                   const loading = this.$loading({
                          lock: true,
                          text: '10s后跳转到商品页面~',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                   });
                    setTimeout(() => {
                         this.$router.push({path: "/Register"}); // 强制切换到注册页面
                         loading.close();
                    }, 5000);  // 5秒跳转
                 } else {  // 注册失败
                   this.openOff2 = true;
                   // 延迟10s返回首页
                   //setTimeout(this.$router.push({name: 'BookList', params: {}}), 10000);
                   //调用elementUI的加载层
                   const loading = this.$loading({
                          lock: true,
                          text: '10s后跳转到商品页面~',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                   });
                    setTimeout(() => {
                         this.$router.push({path: "/Register"}); // 强制切换到注册页面
                         loading.close();
                    }, 5000);  // 5秒跳转
                 }
              } else {

              }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
  .form {
    padding-left: 35%;
  }
</style>
